import React, {Component} from 'react'
import {filterText, fromNow, post} from '../../../common/js/utils'
import {GoodIcon} from '../comments/good_icon'
import {Comment, Avatar, Button, Alert} from 'antd'
import {Link} from 'react-router-dom'
import {connect} from 'react-redux'
import propTypes from 'prop-types'
import {ReplyForm} from '../../detail/reply_form'
import {PopConfirm} from '../../../component/pop_confirm'
import './index.scss'

function mapStateToProps(state, props) {
  return {
    userInfo: state.get('userInfo')
  }
}

@connect(mapStateToProps)
class Reply extends Component {

  state = {
    description: '',
    show: true
  }

  delReply = () => {
    const { item, onDel } = this.props
    post('/api/reply/del', {
      replyId: item._id
    }).then(res => {
      if (res.result === 1) {
        this.setState({show: false})
        onDel()
      }
    })
  }

  goodReply = () => {
    const item = this.props.item
    post('/api/reply/good', {
      replyId: item._id
    }).then(res => {
      if (res.result === 1) {
        item.clicked = !item.clicked
        if (item.clicked) {
          item.good_count++
        } else {
          item.good_count--
        }
        this.setState({})
      }
    })
  }

  replySuccess = (e) => {
    this.setState({
      description: e.content
    })
  }

  render() {
    const {item, userInfo} = this.props
    const {description, show} = this.state
    if (!item.createdBy) item.createdBy = userInfo.toJS()
    if (!item.replyTo) item.replyTo = userInfo.toJS()
    const replyAction = item.createdBy._id !== userInfo.get('_id') ?
      [
        <ReplyForm
          comment={item.comment}
          reply={item}
          onSuccess={this.replySuccess}
        >
          <Button type="link" title={`回复“${item.createdBy.nickname}”`} className="edit" >回复</Button>
        </ReplyForm>
      ] :
      [
        <PopConfirm
          onConfirm={this.delReply}
        >
          <Button
            type="link"
          >
            <span className="danger">删除</span>
          </Button>
        </PopConfirm>
      ]
    if (!show) return null
    return (
      <Comment
        className="my-replies"
        actions={
          [
            <GoodIcon
              title={`${item.good_count}人觉得很赞`}
              type="like-o"
              text={item.good_count}
              clicked={item.clicked}
              onClick={e => this.goodReply()}
            />,
            ...replyAction
          ]
        }
        author={
          <span>{item.createdBy.nickname}</span>
        }
        avatar={
          <Avatar
            src={item.createdBy.face}
            alt={item.createdBy.nickname}
          />
        }
        datetime={fromNow(item.meta.createdAt)}
        content={
          <div>
            {
              item.at ?
                <span className="at">@{item.replyTo.nickname}：<span dangerouslySetInnerHTML={{__html: filterText(item.at.content)}} /></span> :
                <span className="at">@{item.comment.createdBy.nickname}：<span dangerouslySetInnerHTML={{__html: filterText(item.comment.content)}} /></span>
            }
            <Link style={{marginLeft: 20}} to={`/detail/${item.movie._id}`}>{item.movie.title}</Link>
            <p style={{margin: '10px 0'}} dangerouslySetInnerHTML={{__html: filterText(item.content)}} />
          </div>
        }
      >
        {
          description ?
            <Alert
              description={
                <p dangerouslySetInnerHTML={{__html: filterText(description)}} />
              }
              closable message="回复成功"
              type="success"
              showIcon
              afterClose={e => this.setState({description: ''})}
            /> :
            null
        }
      </Comment>
    )
  }
}

Reply.propTypes = {
  item: propTypes.object.isRequired,
  onDel: propTypes.func
}

Reply.defaultProps = {
  onDel: () => {}
}

export {Reply}
